Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br

5o. módulo

Desenvolvimento Web (DWEI5)


AULA 04 - PROPRIEDADES CSS DE LAYOUT

Agenda

  • DOM
  • Box Model
  • Propriedades de Layout
  • Propriedade Display: Flex
  • CSS-Grid
  • Perguntas

1. Document Object Model (DOM)

  • Significa Document Object Model, Modelo de Objeto de Documento.
  • Ele define a estrutura lógica dos documentos e a maneira como um documento é acessado e manipulado. A estrutura lógica que é muito parecida com uma árvore.
  • Cada documento contém zero ou um nó do tipo doctype. Um nó do elemento raiz e zero ou mais comentários ou instruções de processamento; o elemento raiz serve como raiz da árvore de elementos do documento.

2. Box Model padrão do CSS

  • O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML.
  • O box model, detalha ainda, as opções de ajuste de margens, bordas, padding e conteúdo para cada elemento.
  • É uma propriedade que determina o tamanho final (altura e largura) dos elementos.
  • E o box model tradicional da especificação tem uma regra bastante confusa:
    • A propriedade element width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura).
    • Se você quiser que um elemento ocupe metade da página mas com uma borda de 10px, não funciona utilizar:
      #elemento {
        border: 10px solid #555;
        width: 50%;
      }
      
  • O tamanho final do elemento terá 20px mais da metade do tamanho do pai.
  • Surge então a propriedade box-sizing que considera o tamanho final do elemento, considerando o padding e border.

2.1. Propriedade box-sizing

  • Por padrão todos os elementos possuem o valor do box-sizing: content-box.
  • Valores possíveis:

    • border-box: indica que o tamanho considerará até a borda do elemento (width = border + padding).
    • content-box: indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).
  • Observação:

    • Os elementos em blocos, ocupam o máximo da largura e o mínimo de altura.
    • Os elementos em linha, ocupam o espaço do conteúdo. Quando se usa valores em %, os cálculos das larguras e alturas dos elementos são feitos em relação aos elementos pais.
    • As versões mais antigas do Firefox precisa do prefixo -moz- e, Chrome, Safari e Android, do -webkit-.
/* Valor padrão */
#elemento {
    box-sizing: content-box;
}
#elemento {
    box-sizing: border-box;
}
  • Exemplos:

2.1.1 box-sizing: border-box;

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>
/* Arquivo css/estilo.css */  
/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;  /* propriedade para cor de fundo */
  height: 600px;              /* propriedade para altura de conteúdo */
  width: 600px;               /* propriedade para largura de conteúdo */
  padding: 5px;               /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;               /* propriedade para largura do conteúdo */
  height: 100px;              /* propriedade para altura do conteúdo */
  box-sizing: border-box;     /* propriedade para tamanho do conteúdo */
  border: 2px solid red;      /* propriedade para borda do conteúdo */
  padding: 10px;              /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;               /* propriedade para margens ao redor do conteúdo */
  color: #000;                /* propriedade para cores do texto do conteúdo */
  font-weight: bold;          /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);  /* propriedade para sombra do conteúdo */
  background-color: #fff;     /* propriedade para cor de fundo do conteúdo */
}

Saída:

Representação do CSS no Box Model de um elemento (class="item"):

  • border-box: indica que o tamanho considerará até a borda do elemento (width = border + padding).
  • Uso do box-sizing: border-box; width: 250px; height: 100px;
  • Neste exemplo, a largura final do elemento será de 250px.

2.1.2. box-sizing: content-box;

  • Este é o padrão da propriedade.
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>
/* Arquivo css/estilo.css */  
/* propriedades css para formatação do identificador content */
#content {
  background-color: #2e86c1;  /* propriedade para cor de fundo */
  height: 600px;              /* propriedade para altura de conteúdo */
  width: 600px;               /* propriedade para largura de conteúdo */
  padding: 5px;               /* propriedade para espaçamento ao redor do conteúdo */
}

.item {
  width: 250px;               /* propriedade para largura do conteúdo */
  height: 100px;              /* propriedade para altura do conteúdo */
  box-sizing: content-box;     /* propriedade para tamanho do conteúdo */
  border: 2px solid red;      /* propriedade para borda do conteúdo */
  padding: 10px;              /* propriedade para espaçamento ao redor do conteúdo */
  margin: 10px;               /* propriedade para margens ao redor do conteúdo */
  color: #000;                /* propriedade para cores do texto do conteúdo */
  font-weight: bold;          /* propriedade para negrito do texto do conteúdo */
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);  /* propriedade para sombra do conteúdo */
  background-color: #fff;     /* propriedade para cor de fundo do conteúdo */
}

Saída:

Representação do CSS no Box Model de um elemento (class="item"):

  • content-box: indica que o tamanho dele é definido pelo seu conteúdo apenas (valor default). É o box model tradicional (width = element width).
  • Uso do box-sizing: content-box; width: 250px; height: 100px;
  • Neste exemplo, a largura final do elemento será 250px + 20px + 4px, totalizando 274px.

Resumo Comparativo

  • A diferença é mínima ao visualizar as duas telas com os retângulos.
2.1.1 border-box 2.1.2 content-box
box-sizing: border-box; width: 250px; height: 100px;
box-sizing: content-box; width: 250px; height: 100px;
Largura Final = 250px
Largura Final = 250px + 20px + 4px = 274px




3. Propriedades CSS de Layout

3.1. Propriedade Margin

  • Para aprofundamento, consulte MDN Web Docs.
  • Margin: É a distância a partir de cada um dos lados e de seus elementos vizinhos (ou às bordas do documento).
  • Margin: aplica formatação do espaçamento do elemento em relação a seus adjacentes.
  • Valores possíveis: em, pixels, %.
  • Sintaxe: Podemos declarar de 4 maneiras:
/* Exemplo 1 */
#elemento {
    margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    margin: top right bottom left;
}
Exemplo1 Exemplo2 Exemplo3 Exemplo4
margin: 10px; margin: 10px 8px; margin: 10px 8px 6px; margin: 10px 8px 6px 12px;

3.2. Propriedade Padding

  • Para aprofundamento, consulte MDN Web Docs.
  • Padding: É a distância do elemento entre a borda e o seu conteúdo.
  • Padding: aplica formatação do espaçamento ao redor do elemento em relação a sua borda.
  • Valores possíveis: em, pixels, %.
  • Sintaxe: Podemos declarar de 4 maneiras:
/* Exemplo 1 */
#elemento {
    padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
    padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
    padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
    padding: top right bottom left;
}
Exemplo1 Exemplo2 Exemplo3 Exemplo4
padding: 10px; padding: 10px 8px; padding: 10px 8px 6px; padding: 10px 8px 6px 12px;

3.3. Propriedade Position (Atualmente está sendo pouco usado)

  • Para aprofundamento, consulte MDN Web Docs.
  • Ou ainda o artigo 5 Things You Might Not Know About the CSS Positioning Types.
  • A propriedade Position indica ao navegador como ele tratará aquele elemento.
  • Position: Aplica formatação à posição dos elementos.
  • Valores possíveis:
    • Static: por default, os elementos são static. Neste caso, não poderá definir a posição com left, right, top e bottom. Onde o elemento estiver ele ficará.
    • Relative: mantém na posição do fluxo normal do documento. Permitido definir a posição utilizando: top, left, right e bottom. O elemento será posicionado aonde for designado, caso esteja sozinho. Caso contrário, será movido conforme valores atribuídos e demais elementos da página. O posicionamento é sempre feito em relação os demias elementos da página. E os valores negativos, movem os elementos para sentidos inversos.
    • Absolute: leva o elemento para fora do fluxo normal do documento, deixando um espaço pra trás. Em um elemento definido desta forma, as coordenadas x, y são relativas a seu pai, posicio- nando em relação as bordas do elemento ou corpo, se não tiver elemento pai.
    • Fixed: similar ao absoluto, porém, está travado na posição relativa ao viewport. Quando usa scroll, os elementos fixos não serão movidos com o resto do documento.

3.4. Propriedade Float (Atualmente está sendo pouco usado)

  • Para aprofundamento, consulte MDN Web Docs.
  • Ou ainda o artigo CSS: Truques para dominar a propriedade Float.

  • O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Mediante o arquivo html abaixo, aplicaremos algumas modificações para exemplificar o uso do float.

  • float: aplica a formatação no elemento de forma a mostrar como ele interage com os demais.
  • Valores possíveis: left, right, none.
  • Sintaxe:
#elemento { 
    float: left;
}

Para limpar o float, utiliza-se clear.

  • clear: Limpa a formatação dos elementos que usaram float.
  • Valores possíveis: right, left, both ou none.
<!-- Exemplo index.html sem float -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Saída:

  • É exibido as duas divisões uma sobre a outra. Com larguras de 250px cada.
<!-- Exemplo index.html COM float -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Float</title>
    <style>
      .tudo {
        background-color: #2e86c1;
        height: 600px;
        width: 600px;
        padding: 5px;
      }
      .menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
      }
/* Inclusão do FLOAT */
      .menu {
        float: left;
        width: 30%;
      }
      .conteudo {
        float: right;
        width: 60%;
      } 
    </style>
</head>
<body>
  <div class="tudo">
      <div class="menu">Menu</div>
      <div class="conteudo">Conteúdo</div>
  </div>
</body>
</html>

Saída:

  • Observação:
    • É exibido as duas divisões uma ao lado da outra, porém, suas larguras foram modificadas para atender a condição de float, onde a classe menu passou a ter 30%, e a classe conteúdo 60%, totalizando 90% da largura total que é 600px.
    • Caso ultrapasse a largura do elemento pai, o elemento é automaticamente levado para a linha abaixo. Ou na direira ou na esquerda, dependendo da configuração do float.

3.5. Propriedade Visibility

  • Parta aprofundamento, consulte MDN Web DOCS.
  • Ou ainda o artigo Visibility.
  • Visibility: Pode ser usada para ocultar um elemento enquanto deixa o espaço onde ele teria sido criado. Também utilizado para ocultar linhas e colunas de uma tabela.
  • Valores possíveis:
    • visible: valor default, o elemento está sempre visível.
    • hidden: esconde o elemento não modifica o layout. Os filhos serão visíveis se estiverem com o valor visible.
    • collapse: as linhas ou colunas estão ocultas e o espaço que ocuparam é removido.
/* Código omitido para facilitar a visualização da modificação */
.menu {
        float: left;
        width: 30%;
        visibility: hidden;
      }
/* Código omitido para facilitar a visualização da modificação */

Saída:

  • Neste caso, a classe menu, recebeu a propriedade visiility: hidden, o que fez ocultar a classe, porém permite a reserva do espaço, não sendo preeenchido com nada.
  • Caso utilize o valor collapse, então seu espaço poderá ser preenchido.

3.6. Propriedade Outline

  • Para aprofundamento consulte, MDN Web Docs.
  • Ou ainda o artigo Outline.
  • Outline: Aplica a formatação ao redor do elemento, externo às bordas.
  • Valores possíveis: de cor, de estilo de linha e espessura.
    • outline-color: valor;
    • outline-style: valor;
    • outline-width: valor; ou
    • outline: outline-color outline-style outline-width;

Exemplo:

#elemento {
    outline: rgba(0, 0,107,.65) solid 5px;
}
  • Ainda utilizando o exemplo anterior original sem a propriedade visibility, e modificando somente as classes:
/* Código omitido para facilitar a visualização da modificação */
.menu, .conteudo {
        height: 100px;
        width: 250px;
        color: #000;
        font-weight: bold;
        box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
        background-color: #ffffff;
        margin: 10px;
        outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */

Saída:

3.7. Propriedade Display

  • Para aprofundamento, consulte MDN Web Docs.
  • Display: Aplica a formatação de quebra antes ou depois, conforme os valores da propriedade.
  • Valores possíveis:
    • inline: elementos exibidos em linha (valor default). Por exemplo: as tags strong, a, em.
    • block: é inserida uma quebra de linha antes e depois do elemento. Por exemplo: as tags h1, h2, p. São exibidos em blocos.
    • none: não exibe o elemento com efeitos avançados. Se utilizar a propriedade visibility: hidden; você esta indicando ao browser para esconder o elemento.
    • inline-block: área como bloco, e itens dentro como linha.
    • list-item: igual a li.
    • flex: cada conteúdo filho se comporta como se fosse um bloco.

4. Propriedades CSS de Layout - Display com o valor Flex

FlexBox

<!-- Exemplo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula04</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <div id="content">
    <div class="item">01</div>
    <div class="item">02</div>
    <div class="item">03</div>
    <div class="item">04</div>
  </div>
</body>
</html>
/* Exemplo estilo.css */
#content {
  background-color: #2e86c1;
  height: 600px;  
  width: 600px;            
  padding: 5px;
}

.item {
  width: 100px; 
  height: 100px;  
  margin: 10px; 
  color: #000; 
  font-weight: bold; 
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); 
  background-color: #fff;   
}

Saída:

4.1. Display: Flex

  • display: flex; : Indica que o conteúdo dentro de um container se comportará como um bloco, um container.
  • Exemplo:
    • No arquivo estilo.css:
      • Inserir a propriedade display: flex no identificador #content.
      • Na Figura a seguir, é exibido como é visualizado no navegador.
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade display: flex */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;
  padding: 5px;
  display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.2. Flex-direction

  • flex-direction: formata a direção do posicionamento dos elementos.
  • Valores possíveis:
    • row: exibe os itens na direção de linha, da esquerda pra direita. (valor default).
    • column: exibe os itens na direção de coluna de cima pra baixo.
    • row-reverse: exibe os itens na direção de linha, da direita pra esquerda.
    • column-reverse: exibe os itens na direção de coluna de baixo pra cima.
    • Exemplo:
      • No arquivo estilo.css:
        • Inserir a propriedade flex-direction: row no identificador #content.
        • E em seguida, altere para os demais valores para verificar como será visualizado no navegador.

flex-direction : row;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flex-direction : column;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flexdirection: row-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

flexdirection: column-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.3. Flex-wrap

  • flex-wrap: determina se os elementos filhos aceitarão ou não uma quebra de conteúdo.
  • Valores possíveis:
    • wrap: permitem a quebra de conteúdo filhos.
    • nowrap: não permitem a quebra de conteúdo filhos (valor default).
    • wrap-reverse: efetuam a quebra de conteúdo filhos e são exibidos de forma inversa (de baixo para cima).
  • Ou usar:
#elemento { 
    flex-flow: flex-direction flex-wrap;
}

Exemplo1

  • No arquivo css:
    • Inserir a propriedade flex-wrap: nowrap no identificador #content.
    • Nesta situação, a visualização será idêntica ao que foi apresentado com a propriedade flex-direction: row. Pois os itens filhos são ajustados dentro do espaço para não quebrarem.

flex-wrap: nowrap;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo2

  • No arquivo css:
    • Altere a propriedadede largura (width: 100px) na classe .item, para width: 250px.
    • Os itens filhos são redimensionados para caberem dentro do espaço definido.
    • Agora, altere a propriedade flex-wrap: nowrap no identificador #content para flex-wrap: wrap.

flex-wrap: wrap;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap;     /* Modificado de nowrap para wrap */
}
.item {
  width: 250px;          /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo3

  • No arquivo css:
    • Mantendo a propriedadede largura na classe .item, com width: 250px.
    • E em seguida, altere a propriedade flex-wrap para os demais valores.

flex-wrap: wrap-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: row;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo4:

  • No arquivo css:
    • Altere flex-direction: row para a propriedade flex-direction: column-reverse.
    • E a propriedade flex-wrap: wrap-reverse.

flex-wrap: wrap-reverse;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
    background-color: #2e86c1;
    height: 600px;
    width: 600px;
    padding: 5px;
    flex-direction: column-reverse;
    flex-wrap: wrap-reverse;     /* Modificado de wrap para wrap-reverse */
}
.item {
  width: 250px;                  /* Modificado de 100px para 250px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

4.4. Justify-content

  • justify-content: determina o posicionamento dos elementos na página.
  • Valores possíveis:
    • flex-start: todos os elementos filhos são alinhados à esquerda, no topo (valor default).
    • flex-end: todos os elementos filhos são alinhados à direita, sem inversão de ordem.
    • space-around: os elementos filhos são distribuídos ao redor do elemento e de maneira uniforme dentro do espaço do container.
    • space-between: os elementos filhos são distribuídos a partir do centro do container para as extremidades. Sem inserir margem na lateral.
  • Ou usar:
#elemento { 
    justify-content: flex-start;
}

Exemplo1:

  • No arquivo css:
    • Altere a propriedadede largura (width: 250px) na classe .item, para width: 100px.
    • Altere a propriedadede largura (width: 600px) no identificador #content, para width: 900px.
    • E a propriedade flex-direction para row.
    • E a propriedade flex-wrap para wrap.
    • E acrescente a propriedade justify-content: flex-start.

justify-content: flex-start;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;         /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;  /* modificado para row */
  flex-wrap: wrap;      /* modificado para wrap */
  justify-content: flex-start;  /* inserido */
}

.item {
  width: 100px;         /* modificado de 250px para 100px */
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo2:

  • No arquivo css:
    • Altere a propriedadede justify-content: flex-start para justify-content: flex-end.

justify-content: flex-end;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-end;  /* modificado de flex-start para flex-end */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo3:

  • No arquivo css:
    • Altere a propriedadede justify-content: flex-end para justify-content: space-around.

justify-content: space-around;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-around;  /* modificado de flex-end para space-around */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo4:

  • No arquivo css:
    • Altere a propriedadede justify-content: space-around para justify-content: space-between.

justify-content: space-between;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 900px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: space-between;  /* modificado de space-around para space-between */
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

4.5. Align-items

  • align-items: determina o posicionamento vertical dos elementos na página.
  • Valores possíveis:
    • flex-start: exibe os elementos do container do topo para baixo, da esquerda para direita (valor default).
    • flex-end: exibe os elementos do container de baixo pra cima, da esquerda para direita.
    • center: centraliza todos os elementos.
    • strech: exibe os elementos do topo para baixo, caso não tenha sido definido a altura dos elementos filhos do container, os mesmos são esticados até abaixo. Para visualizar, remova a propriedade height: 100px da classe .item.
    • baseline: é um alinhamento sensível ao conteúdo.
  • Ou usar:
#elemento { 
    align-items: flex-start;
}

Exemplo1:

  • No arquivo css:
    • Altere a propriedadede justify-content: space-between; no identificador #content, para justify-content: flex-start;.
    • Retorne a largura do identificador #content de 900px para width: 600px.
    • E acrescente a propriedade align-items: flex-start.

align-items: flex-start;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-start;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo2:

  • No arquivo css:
    • E altere a propriedade align-items: flex-start para align-items: flex-end;.

align-items: flex-end;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: flex-end;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo3:

  • No arquivo css:
    • E altere a propriedade align-items: flex-end; para align-items: center;.

align-items: center;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: center;
}

/* .item foi omitido para facilitar o entendimento, não foi modificado */

Saída:

Exemplo4:

  • No arquivo css:
    • E altere a propriedade align-items: center; para align-items: strech;.
    • Remova a altura (height: 100px) da classe .item.

align-items: strech;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: strech;
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Exemplo5:

  • No arquivo css:
    • E altere a propriedade align-items: strech; para align-items: baseline;.
    • Mantenha a remoção da altura (height: 100px) da classe .item.

align-items: baseline;

<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px;          
  padding: 5px;
  display: flex;
  flex-direction: row;   
  flex-wrap: wrap;       
  justify-content: flex-start;  
  align-items: baseline;
}
.item {
  width: 100px;    /* height removido */
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

Saída:

Existem outras propriedades, tal como align-content. Pesquise a respeito!

4.6. Order

  • order: determina a ordem em que os elementos serão exibidos na página.
  • Valores possíveis:
    • valores inteiros.
  • Definindo uma pseudo-classe para cada um dos itens filhos. Teremos:
.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Importante:

  • Mantendo os valores padrões para as propriedades no identificador #content:
display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  • Acrescente as pseudo-classes após a classe .item, o arquivo css ficará assim:
#content {
  background-color: #2e86c1;
  height: 600px;
  width: 600px; /* modificado de 600px para 900px */
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
}

.item:nth-child(1) { 
    order: 4; 
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

4.7. Flex-grow

  • flex-grow: define a propriedade de crescer o elemento na página.
  • Valores possíveis:
    • O valor default é 0.
    • Não é possível valores negativos.
    • Se um item filho tiver o flex-grow: 2, ele ocupará duas vezes mais o espaço previsto para os outros elementos. E se o width dos elementos estiver definido, ele ocupará o espaço restante.

4.8. Flex-shrink

  • flex-shrink: define a propriedade de encolher o elemento na página. Somente como informativo.
  • Valores possíveis:
    • Valores possíveis: valores inteiros.
    • O valor default é 1.
    • Não é possível valores negativos.

4.9. Flex-basis

  • flex-basis: define o width dos elementos antes de distribuir o restante para o flex-grow.
  • Valores possíveis:
    • Valores possíveis: valor em pixel.
    • O valor default é auto.
    • Se definir 0, os elementos não serão redimensionados.

Exemplo1:

  • No arquivo css:
    • Na classe .item, definindo os valores default para as 3 propriedades e removendo width da classe .item**.
    • Acrescente a definição das pseudo-classes acrescentando flex-grow:2; na primeira pseudo-classe.
    • Teremos a classe .item da seguinte forma:
.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: auto;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

Exemplo2:

  • No arquivo css:
    • Na classe .item, modifique o valor da propriedade flex-basis: auto; para flex-basis: 65px;, assim os elementos serão definidos nesta largura e o espaço restante é usado nos elementos que foram configurados com a propriedade flex-grow.
    • Teremos a classe .item da seguinte forma:
.item {
  /* width: 100px; removido */
  height: 100px; 
  margin: 10px;
  color: #000;
  font-weight: bold;
  box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
  background-color: #fff;
  flex-grow: 0;         /* inserido */
  flex-shrink: 1;       /* inserido */
  flex-basis: 65px;     /* inserido */
}

.item:nth-child(1) { 
    order: 4; 
    flex-grow: 2;  /* inserido */
}
.item:nth-child(2) { 
    order: 3;
}
.item:nth-child(3) { 
    order: 1; 
}
.item:nth-child(4) { 
    order: 2; 
}

Saída:

  • Os itens 03, 04 e 02 possuem 65px da largura, enquanto que o item 01 expandiu no restante do espaço, pois possui o valor de flex-grow definido.

Observação:

5. CSS-Grid

  • Para ampliar o conhecimento, consulte o artigo CSS Grid: One Layout, Multiple Ways.

  • De acordo com [CSS-TRICKS], "o CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, o que significa que pode lidar com colunas e linhas, ao contrário do flexbox, que é amplamente um sistema unidimensional. Você poderá trabalhar com o Grid Layout aplicando regras CSS tanto a um elemento pai (que se torna o Grid Container) quanto aos filhos desse elemento (que se tornam Grid Items".

  • Para aprofundamento no assunto, sugiro a leitura do Guia completo do CSS-GRID.

  • CSS-Tricks: Grade CSS: um layout, várias maneiras.

6. Lista de Tags CSS para Flexbox

  • Criado por Joni Bologna.

Referências

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

Perguntas

  • Esclareça suas eventuais dúvidas durante as aulas.
  • Ou pelo E-mail: paulagiancoli@ifsp.edu.br.
  • Ou pelo Fórum do componente curricular.

ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

</div> </div>